<template>
	<div class="updatePhone">
		<popup v-model="show" position="right" width="100%">
			<BaseHeader title="修改登录密码" showBack="true" preventGoBack="true" backText="" :back="hide" ></BaseHeader>
			<group label-width="6em" label-align="right" label-margin-right="1em" class="mtHeader">
			    <x-input title='新密码' v-model="form.password" ref="password"  type="password" :min="6" :max="15" required ></x-input>
			    <x-input title='确认新密码' v-model="form.password_confirmation" type="password" ref="password_confirmation"  :min="6" :max="15"  required></x-input>
			    <x-input title="验证码" class="weui-cell_vcode" v-model="form.captcha" ref="captcha" required :min="4" :max="4">
		        	<img slot="right" class="weui-vcode-img" v-bind:src="captchaImg"  v-on:click="randCaptcha" >
		      	</x-input>
		    </group>
		    <div style="padding:15px;">
		    	<x-button @click.native="update" :show-loading="btn.showloading" :disabled="btn.disabled">修改</x-button>
		    </div>
		</popup>
	</div>
</template>
<script>
	import {Popup,Group,XInput,XButton} from 'vux'
	
	import BaseHeader from 'touch/components/common/header';
	import SendPhoneCode from 'touch/components/common/send-phone-code';
	import Axios from 'touch/config/axios';

	export default{
		components :{
			Popup,
			BaseHeader,
			Group,
			XInput,
			XButton,
			SendPhoneCode,
		},
		data () {
			return {
				show : false,
				captchaImg :'',
				form :{
					password : '',
					password_confirmation : '',
					captcha : '',
					path:this.$route.path
				},
				btn :{
					showloading : false,
					disabled : false,
				}
			}
		},
		methods:{
			hide(){
				this.show = false;
			},
			randCaptcha(){
	        	this.captchaImg = '/captcha?'+new Date().getTime();
	        },
	        //表单验证
	        formValidate(){
	        	if(this.form.password=='' || this.form.password_confirmation=='' || this.form.captcha==''){
	        		return false;
	        	}
	        	if(this.$refs.password.valid==false || this.$refs.password_confirmation.valid==false || this.$refs.captcha.valid==false){
	        		return false;
	        	}
	        	if(this.form.password!=this.form.password_confirmation){
	        		this.$vux.toast.show({type : 'warn', text:'密码不相同'});return false;
	        	}
	        	return true;
	        },
	        //表单值重置
	        formReset(){
	        	this.$refs.password.reset();
	        	this.$refs.password_confirmation.reset();
	        	this.$refs.captcha.reset();
	        },
			update(){
				if(!this.formValidate()){
					return false;
				}
				this.btn.showloading = true;
				this.btn.disabled = true;
				Axios.Home.UpdatePwd(this.form)
		        .then(res =>{
		        	this.btn.showloading = false;
		        	this.btn.disabled = false;
		        	if(!res) return false;
		            this.$vux.toast.show({type : 'success', text: res.msg});
		            setTimeout(function(){
		            	window.location.href="/auth/#/login";
		            },1000);
		        })
			}
		},
		watch :{
			show(bool){
				this.formReset();
				if(bool){
					this.randCaptcha();
				}
			}
		}
	}
</script>
